<template>
  <div class="login-container">
    <h2>登录</h2>
    <div v-if="webstore.errorMessage">{{ webstore.errorMessage }}</div>
    <input type="text" v-model="username" placeholder="用户名" />
    <input type="password" v-model="password" placeholder="密码" />
    <button @click="login">登录</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { webStore } from "../store/mystore";
import { useRouter } from "vue-router";

const webstore = webStore();
const router = useRouter();
const username = ref("admin");
const password = ref("12345");
const login = () => {
  //   console.log(username, password);
  if (username.value == "admin" && password.value == "12345") {
    webstore.Login = true;
    webstore.Token = "ABCDEFGHIJK";
    // console.log(webstore.Login);
    router.push("/");
  } else {
    webstore.errorMessage = "login wrong.";
  }
};
</script>
<style scoped>
.login-container {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
  margin-top: 50px;
}
</style>
